<template>
    <div class="LoginBox">
        <div class="loginHeader">
            <div class="headerbox">
                <span class="headerlogo">
                    <img style="height: 48px" src="../assets/logo-black.png" alt />
                </span>
            </div>
        </div>
        <div class="loginCentoxBox">
            <div class="loginCentox">
                <div class="centosleft">
                    <img src="../assets/images/img.png" alt />
                </div>
                <div class="centosright">
                    <div class="rightheader">
                        <div class="headerInfo">
                            <div class="infotop">欢迎您</div>
                            <div class="infobottom">登录毕业生网上签约与毕业去向登记平台系统</div>
                        </div>
                        <div class="headerimg">
                            <img style="height: 55px" src="../assets/images/img_2.png" alt />
                        </div>
                    </div>
                    <div class="rightcontBox">
                        <Form ref="usernameLoginForm" :model="form" :rules="rules" class="loginFormBox">
                            <FormItem prop="username">
                                <Input v-model="form.username" prefix="ios-contact" size="large" clearable placeholder="账号/邮箱/手机号" autocomplete="off" />
                            </FormItem>
                            <FormItem prop="password">
                                <Input type="password" v-model="form.password" prefix="ios-lock" size="large" password placeholder="请输入密码" autocomplete="off" />
                            </FormItem>
                            <FormItem>
                                <Button :loading="loading" @click="submitLogin" long>登录</Button>
                            </FormItem>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
        <div class="loginfooter"></div>
        <Row type="flex" justify="center" align="middle" @keydown.enter.native="submitLogin" style="height: 100%">
            <Col class="content">
                <div>
                    <Header />
                    <Row v-if="!socialLogining">
                        <Tabs v-model="tabName">
                            <TabPane :label="$t('usernameLogin')" name="username" icon="md-person">
                                <Form ref="usernameLoginForm" :model="form" :rules="rules" class="form" v-if="tabName == 'username'">
                                    <FormItem prop="username">
                                        <Input v-model="form.username" prefix="ios-contact" size="large" clearable placeholder="账号/邮箱/手机号" autocomplete="off" />
                                    </FormItem>
                                    <FormItem prop="password">
                                        <Input type="password" v-model="form.password" prefix="ios-lock" size="large" password placeholder="请输入密码" autocomplete="off" />
                                    </FormItem>
                                </Form>
                            </TabPane>
                        </Tabs>

                        <Row type="flex" justify="space-between" align="middle">
                            <Checkbox v-model="saveLogin" size="large">{{ $t('autoLogin') }}</Checkbox>
                        </Row>
                        <Row>
                            <Button class="login-btn" type="primary" size="large" :loading="loading" @click="submitLogin" long>
                                <span v-if="!loading">{{ $t('login') }}</span>
                                <span v-else>{{ $t('logining') }}</span>
                            </Button>
                        </Row>
                    </Row>
                    <div v-if="socialLogining">
                        <RectLoading />
                    </div>
                </div>
                <Footer />
            </Col>
            <!--<LangSwitch />-->
        </Row>
    </div>
</template>

<script>
import {
    login,
    userInfo,
    githubLogin,
    qqLogin,
    weiboLogin,
    wechatLogin,
    dingdingLogin,
    workwechatLogin,
    getJWT,
    sendLoginSms,
    smsLogin,
    initCaptcha,
    drawCodeImage,
    getOtherSet,
    getNotice,
    loginJud
} from '@/api/index';
import { validateMobile } from '@/libs/validate';
import Cookies from 'js-cookie';
import Header from '@/views/main-components/header';
import Footer from '@/views/main-components/footer';
import LangSwitch from '@/views/main-components/lang-switch';
import RectLoading from '@/views/my-components/xboot/rect-loading';
import CountDownButton from '@/views/my-components/xboot/count-down-button';
import util from '@/libs/util.js';
export default {
    components: {
        CountDownButton,
        RectLoading,
        LangSwitch,
        Header,
        Footer
    },
    data() {
        return {
            showMore: false,
            captchaId: '',
            captchaImg: '',
            loadingCaptcha: true,
            socialLogining: true,
            error: false,
            tabName: 'username',
            saveLogin: true,
            getSms: '获取验证码',
            loading: false,
            sending: false,
            errorCode: '',
            form: {
                username: '',
                password: '',
                mobile: '',
                code: ''
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: '账号不能为空',
                        trigger: 'change'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '密码不能为空',
                        trigger: 'change'
                    }
                ],
                imgCode: [
                    {
                        required: true,
                        message: '验证码不能为空',
                        trigger: 'change'
                    }
                ],
                mobile: [
                    {
                        required: true,
                        message: '手机号不能为空',
                        trigger: 'change'
                    },
                    {
                        validator: validateMobile,
                        trigger: 'change'
                    }
                ]
            }
        };
    },
    methods: {
        getCaptchaImg() {
            this.loadingCaptcha = true;
            initCaptcha().then(res => {
                this.loadingCaptcha = false;
                if (res.success) {
                    this.captchaId = res.result;
                    this.captchaImg = drawCodeImage + this.captchaId;
                }
            });
        },
        sendSmsCode() {
            this.$refs.mobileLoginForm.validate(valid => {
                if (valid) {
                    this.sending = true;
                    this.getSms = '发送中';
                    sendLoginSms(this.form.mobile).then(res => {
                        this.getSms = '获取验证码';
                        this.sending = false;
                        if (res.success) {
                            this.$Message.success('发送短信验证码成功');
                            // 开始倒计时
                            this.$refs.countDown.startCountDown();
                        }
                    });
                }
            });
        },
        afterLogin(res) {
            let accessToken = res.result.token;
            this.setStore('accessToken', accessToken);
            getOtherSet().then(res => {
                if (res.result) {
                    let domain = res.result.ssoDomain;
                    Cookies.set('accessToken', accessToken, {
                        domain: domain,
                        expires: 7
                    });
                    Cookies.set('currentUser', this.$route.name, {
                        expires: 7
                    });
                    this.$store.commit('setRoute', this.$route.name);
                }
            });
            // 获取用户信息
            userInfo().then(res => {
                if (res.success) {
                    // 避免超过大小限制
                    delete res.result.permissions;
                    let roles = [];
                    res.result.roles.forEach(e => {
                        roles.push(e.name);
                    });
                    delete res.result.roles;
                    this.setStore('roles', roles);
                    this.setStore('saveLogin', this.saveLogin);
                    if (this.saveLogin) {
                        // 保存7天
                        Cookies.set('userInfo', JSON.stringify(res.result), {
                            expires: 7
                        });
                    } else {
                        Cookies.set('userInfo', JSON.stringify(res.result));
                    }
                    this.setStore('userInfo', res.result);
                    this.$store.commit('setUserInfo', res.result);
                    // 加载菜单
                    util.initRouter(this);
                    // window.location.reload();
                    this.$router.push({
                        name: 'home_index'
                    });
                } else {
                    this.loading = false;
                }
            });
        },
        submitLogin() {
            if (this.tabName == 'username') {
                this.$refs.usernameLoginForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        loginJud({
                            username: this.form.username,
                            password: this.form.password
                            // code: this.form.imgCode,
                            // captchaId: this.captchaId,
                            // saveLogin: this.saveLogin,
                        }).then(res => {
                            if (res.success) {
                                this.afterLogin(res);
                            } else {
                                this.loading = false;
                                this.getCaptchaImg();
                            }
                        });
                    }
                });
            } else if (this.tabName == 'mobile') {
                this.$refs.mobileLoginForm.validate(valid => {
                    if (valid) {
                        if (this.form.code == '') {
                            this.errorCode = '验证码不能为空';
                            return;
                        } else {
                            this.errorCode = '';
                        }
                        this.loading = true;
                        this.form.saveLogin = this.saveLogin;
                        smsLogin(this.form).then(res => {
                            if (res.success) {
                                this.afterLogin(res);
                            } else {
                                this.loading = false;
                            }
                        });
                    }
                });
            }
        },
        toGithubLogin() {
            this.socialLogining = true;
            githubLogin().then(res => {
                if (res.success) {
                    window.location.href = res.result;
                } else {
                    this.socialLogining = false;
                }
            });
        },
        toQQLogin() {
            this.socialLogining = true;
            qqLogin().then(res => {
                if (res.success) {
                    window.location.href = res.result;
                } else {
                    this.socialLogining = false;
                }
            });
        },
        toWeiboLogin() {
            this.socialLogining = true;
            weiboLogin().then(res => {
                if (res.success) {
                    window.location.href = res.result;
                } else {
                    this.socialLogining = false;
                }
            });
        },
        toWeixinLogin() {
            this.socialLogining = true;
            wechatLogin().then(res => {
                if (res.success) {
                    window.location.href = res.result;
                } else {
                    this.socialLogining = false;
                }
            });
        },
        toDingdingLogin() {
            this.socialLogining = true;
            dingdingLogin().then(res => {
                if (res.success) {
                    window.location.href = res.result;
                } else {
                    this.socialLogining = false;
                }
            });
        },
        toWorkwechatLogin() {
            this.socialLogining = true;
            workwechatLogin().then(res => {
                if (res.success) {
                    window.location.href = res.result;
                } else {
                    this.socialLogining = false;
                }
            });
        },
        relatedLogin() {
            let q = this.$route.query;
            let error = q.error;
            if (error !== '' && error !== undefined) {
                // this.$Message.error(error);
                this.$Message.error({
                    content: error,
                    duration: 5,
                    closable: true
                });
            }
            let related = q.related;
            let JWTKey = q.JWTKey;
            if (related && related == '1' && JWTKey) {
                getJWT({ JWTKey: JWTKey }).then(res => {
                    if (res.success) {
                        this.socialLogining = true;
                        let accessToken = res.result;
                        this.setStore('accessToken', accessToken);
                        getOtherSet().then(res => {
                            if (res.result) {
                                let domain = res.result.ssoDomain;
                                Cookies.set('accessToken', accessToken, {
                                    domain: domain,
                                    expires: 7
                                });
                            }
                        });
                        // 获取用户信息
                        userInfo().then(res => {
                            if (res.success) {
                                // 避免超过大小限制
                                delete res.result.permissions;
                                let roles = [];
                                res.result.roles.forEach(e => {
                                    roles.push(e.name);
                                });
                                delete res.result.roles;
                                this.setStore('roles', roles);
                                // 保存7天
                                Cookies.set('userInfo', JSON.stringify(res.result), {
                                    expires: 7
                                });
                                this.setStore('userInfo', res.result);
                                this.$store.commit('setUserInfo', res.result);
                                // 加载菜单
                                util.initRouter(this);
                                this.$router.push({
                                    name: 'home_index'
                                });
                            } else {
                                this.socialLogining = false;
                                // this.$Message.error("获取登录用户信息失败");
                                this.$Message.error({
                                    content: '获取登录用户信息失败',
                                    duration: 5,
                                    closable: true
                                });
                            }
                        });
                    } else {
                        this.socialLogining = false;
                        // this.$Message.error("使用第三方账号登录失败");
                        this.$Message.error({
                            content: '使用第三方账号登录失败',
                            duration: 5,
                            closable: true
                        });
                    }
                });
            } else {
                this.socialLogining = false;
            }
        },
        handleDropDown(v) {
            if (v == 'test') {
                this.test();
            } else if (v == 'resetByMobile') {
                this.$router.push({
                    name: 'reset'
                });
            } else if (v == 'resetByEmail') {
                this.$router.push({
                    name: 'reset',
                    query: {
                        type: '1'
                    }
                });
            }
        },
        showNotice() {
            getNotice().then(res => {
                if (res.success) {
                    if (!res.result) {
                        return;
                    }
                    let data = res.result;
                    if (data.open && (data.title || data.content) && data.position == 'LOGIN') {
                        this.$Notice.info({
                            title: data.title,
                            desc: data.content,
                            duration: data.duration
                        });
                    }
                }
            });
        },
        test() {
            this.$Notice.info({
                title: '测试体验账号',
                desc: '账号：test或test2<br>密码：123456'
            });
        }
    },
    mounted() {
        this.showNotice();
        this.relatedLogin();
        this.getCaptchaImg();
    }
};
</script>

<style lang="less">
@import './login.less';
</style>
